$(function () {
    // 初始化图书信息列表
    function initList() {
        $.ajax({
            url: 'http://localhost:3000/books',
            type: 'get',
            dataType: 'json',
            success: (data) => {
                // 渲染数据列表
                let html = template('indexTpl', { list: data });
                $('#dataList').html(html);
                console.log(html)
                console.log(data)

                // 必须在渲染完成之后才可以操作DOM标签
                $('#dataList').find('tr').each((index, element) => {
                    let td = $(element).find('td:eq(5)');
                    td.find('a:eq(0)').on('click', () => {
                        let id = $(element).find('td:eq(0)').text();
                        editBook(id);
                    })
                    td.find('a:eq(1)').on('click', function() {
                        let id = $(this).parent().parent().find('td:eq(0)').text();
                        deleteBook(id);
                    });
                    // 绑定添加图书信息的单击事件
                    addBook();
                    // 重置表单
                    let form = $('#addBookForm');
                    form.get(0).reset();
                    $('input[type=hidden]').val('');
                })
            }
        })
    }
    initList();

    // 删除图书
    function deleteBook(id) {
        $.ajax({
            url: '/books/book/' + id,
            type: 'delete',
            dataType: 'json',
            success: (data) => {
                console.log(data)
                // 删除图书信息之后重新渲染页面
                if (data.flag == 1) {
                    initList();
                }

            }
        })
    }
// 编辑图书
    function editBook(id) {
        $.ajax({
            type: 'get',
            url: '/books/book/' + id,
            dataType: 'json',
            success: function (data) {
                console.log(data);
                let form = $('#addBookForm');
                let mark = new MarkBox(600, 400, '编辑图书', form.get(0));
                mark.init();
                form.find('input[name=name]').val(data.name);
                form.find('input[name=author]').val(data.author);
                form.find('input[name=category]').val(data.category);
                form.find('input[name=description]').val(data.description);
                form.find('input[name=id]').val(data.id);
                // 对表单提交按钮重新绑定单击事件
                form.find('input[type=button]').off('click').on('click', () => {
                    // 编辑完成之后重新提交表单
                    $.ajax({
                        type: 'put',
                        url: '/books/book',
                        data: form.serialize(),
                        dataType: 'json',
                        success: (data) => {
                            if (data.flag == 1) {
                                // 隐藏弹窗;
                                mark.close();
                                initList();
                            }
                        }
                    })
                })

            }
        })
    }

    // 添加图书信息
    function addBook() {
        $("#addBookId").on('click', function () {
            let form = $('#addBookForm');
            // 实例化弹窗对象 (dialog.js)
            let mark = new MarkBox(600, 400, '添加图书', form.get(0));
            mark.init();
            form.find('input[type=button]').off('click').on('click', function () {
                $.ajax({
                    type: 'post',
                    url: '/books/book',
                    data: form.serialize(),
                    dataType: 'json',
                    success: (data) => {
                        if (data.flag == 1) {
                            // 关闭弹窗
                            mark.close();
                            // 添加图书成功后重新渲染数据列表
                            initList();
                        } else {

                        }
                    }
                })
            })

        })
    }
})